<template>
	<div v-title data-title="新闻详情">
		<Header></Header>
		<el-container>
		  <el-main style="margin-top: 80px;">
		    <el-row :gutter="20">
		
		      <el-col :span="16">
		        <div class="grid-content bg-purple">
		          <el-card class="news-content">
		            <div class="news-head">
		              <img class="news-post" src="../assets/logo.png" width="40px" height="40px" />
		              <span class="news-author">与时网</span>
		              <span class="news-time"><i class="el-icon-date"></i> 发布时间: {{news.created}}</span>
		              <el-button class="concern" type="danger"><i class="el-icon-plus"></i> 关注</el-button>
		              <el-divider></el-divider>
		            </div>
					
		            <div class="news-main">
						 <div class="mnews">
						   <h1 style="font-size: 50px">{{ news.title }}</h1>
						   <br>
						   <h1 class="newsContent">{{news.description}}</h1>
						   <div class="newsContent" v-html="news.content"></div>
						 </div>
		            </div>
					
		          </el-card>
		        </div>
		      </el-col>
			  
			  <el-col :span="8">
			    <div class="grid-content bg-purple">
			  		
			      <el-card class="news-r">
					  <h3 class="gray">最热新闻</h3>
					  <el-divider></el-divider>
			        <div class="news" v-for="news in newsData.slice(11,18)">
			        	<router-link style="color: black;" target="_blank" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
			        		<h4>{{news.title}}</h4>
			        		<br>
			        	</router-link>
			        </div>
			      </el-card>
			  		
			      <el-card class="news-r">
					  <h3 class="gray">最新咨询</h3>
					  <el-divider></el-divider>
			        <div class="news" v-for="news in newsData.slice(71,78)">
			        	<router-link style="color: black;" target="_blank" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
			        		<h4>{{news.title}}</h4>
			        		<br>
			        	</router-link>
			        </div>
			      </el-card>
			  		
			  		
			    </div>
			  </el-col>
		    </el-row>
		  </el-main>
		</el-container>
		<Footer></Footer>
	</div>
</template>

<script>
	import 'github-markdown-css'
	import Header from "../components/Header";
	import Footer from "@/components/Footer"
	
	export default{
		name:'NewsDetail',
		components:{Header,Footer},
		data() {
		  return {
			news: {
			  id: "",
			  title: "",
			  description: "",
			  content: "",
			  created:""
			},
			
			//新闻内容
			newsData:{
				
			},
		  }
		},
		methods: {
			getNews(){
				this.$axios.get('/newsList').then(res => {
					this.newsData = res.data.data
				})
				
			},
		},
		created() {
			this.getNews()
		  const newsId = this.$route.params.newsId
		  console.log(newsId)
		  const _this = this
		  this.$axios.get('/news/' + newsId).then(res => {
		    const news = res.data.data
		    _this.news.id = news.id
		    _this.news.title = news.title
			_this.news.content = news.content
			_this.news.description = news.description
			 _this.news.created = news.createTime
		  })
		}
	}
</script>

<style>
	.news-content {
	    width: auto;
	  }
	  .newsContent{
		  font-size: 30px;
		  color: gray;
		  /* 超出部分换行 */
		  word-wrap: break-word;
		  /* 首行缩进 */
		  text-indent: 2em;
	  }
	  .news-post{
	    border: gray 3px solid;
	    border-radius: 50%;
	  }
	  .news-author{
	    margin-left: 5px;
	    color: gray;
	    font-size: 20px;
	  }
	  .news-time{
	    margin-left: 10px;
	    color: gray;
	    font-size: 10px;
	  }
	  /* 关注按钮 */
	  .concern{
	    width: 90px;
	    margin-top: 10px;
	    float: right;
	  }
	/* 左新闻栏 */
	  .news-r {
	    margin-bottom: 30px;
	    width: auto;
	  }
	  /* 新闻内边距 */
	  .news-padding{
	    margin-bottom: 10px;
	  }
	  /* 新闻内容 */
	  .mnews {
	    width: 100%;
	    min-height: 700px;
	    /* padding: 20px; */
	  }
</style>
